<template>
	<div class="drp-order drp-orderdetail">
		<div class="drp-order-header">
			<div class="money">+{{ drpOrderDetailData.money }}</div>
			<div class="txt">{{drpOrderDetailData.status==1?$t('lang.divided'):$t('lang.undivided')}}</div>
		</div>
		<div class="section">
			<div class="section-item">
				<div class="label">{{$t('lang.order_sn_alt')}}</div>
				<div class="value">{{drpOrderDetailData.order_sn}}</div>
			</div>
			<div class="section-item">
				<div class="label">{{$t('lang.buyer_info')}}</div>
				<div class="value">{{drpOrderDetailData.buy_user_name}}</div>
			</div>
			<div class="section-item">
				<div class="label">{{$t('lang.order_time')}}</div>
				<div class="value">{{drpOrderDetailData.add_time_format}}</div>
			</div>
		</div>
		<div class="section">
			<div class="title">{{$t('lang.order_goods')}}</div>
			<div class="drp-order-list">
				<div class="goods-li">
					<router-link :to="{name:'goods', params:{id:item.goods_id}}" class="show bg-color-write li" v-for='(item,index) in drpOrderDetailData.goods_list'
					    :key="index">
						<div class="left">
							<img v-if="item.goods_thumb" class="img" :src="item.goods_thumb" />
							<img v-else class="img" src="../../../../assets/img/not_goods.png" />
						</div>
						<div class="right">
							<h4 class="f-05 color-3 twolist-hidden">{{item.goods_name}}</h4>
							<div class="dis-box cont">
								<div class="f-06 color-red box-flex" v-html="item.goods_price_format"></div>
								<div class="f-03 color-7">×{{item.goods_number}}</div>
							</div>
						</div>
					</router-link>
				</div>
			</div>
			<div class="section-item">
				<div class="label">{{$t('lang.dis_commission')}}</div>
				<div class="value">{{drpOrderDetailData.level_per}}</div>
			</div>
			<div class="section-item">
				<div class="label">{{$t('lang.get_commission')}}</div>
				<div class="value">{{drpOrderDetailData.money_format}}</div>
			</div>
		</div>
		<CommonNav :routerName="routerName">
	         <li slot="aloneNav">
				<router-link :to="{name: 'drp'}">
					<i class="iconfont icon-fenxiao"></i>
					<p>{{$t('lang.drp_center')}}</p>
				</router-link>
			</li>
	    </CommonNav>
	</div>
</template>
<script>
	import {
		Toast
	} from 'vant'
	import { mapState } from 'vuex'
	import CommonNav from '@/components/CommonNav'
	export default {
		name: "drp-orderdetail",
		components: {
			CommonNav,
			[Toast.name]: Toast,
		},
		data() {
			return {
				routerName:'drp',
				//默认参数
				parameterData: {
					log_id: '',
				},
			};
		},
		computed: {
			...mapState({
				drpOrderDetailData: state => state.drp.drpOrderDetailData,
			})
		},
		mounted() {
			let that = this
			// 取到路由带过来的参数
			let log_id = that.$route.params.order_id;
			that.parameterData.log_id = log_id
			that.loading(that.$store.dispatch('setDrpOrderDetail', that.parameterData))
		},
		methods: {
			loading(url) {
				let that = this
				Toast.loading({
					duration: 500,
					mask: true,
					message: this.$t('lang.loading')
				}, url);
			}
		}
	};
</script>
<style scoped>
.drp-order-header{ text-align: center; background-color: #fff; padding: 30px 0;}
.drp-order-header .money{ font-size: 30px; font-weight: 700; color: #000; }
.drp-order-header .txt{ color: #f92028; font-size: 16px; }
.section{ margin-bottom: 10px; background-color: #fff; padding: 0 15px 15px;}
.section .section-item{ display: flex; flex-direction: row; justify-content: space-between; font-size: 14px; padding-bottom: 15px}
.section .section-item:last-child{ padding-bottom: 0; }
.section .title{ font-size: 16px; color: #333; padding: 12px 0; border-bottom: 1px solid #999; margin-bottom: 15px}
.section .goods-li .li{ padding: 0; }
.section .drp-order-list{ padding-bottom: 5px; border-bottom: 1px solid #999; margin-bottom: 15px;}
</style>
